<template>
	<view>
		<view class="" v-if="flag">
			购物车空空如也，请先选购
		</view>
		<view class="cartlist" v-else>
			<view class="cartitem" v-for="(item,index) of cartlist" :key="index">
				<checkbox-group @change="selected(item)">
					<checkbox style="transform:scale(0.7)" class="selected" :checked="item.flag" />
				</checkbox-group>

				<image :src="item.img_url" mode=""></image>
				<view class="itemright">
					<view class="line_one">
						<view class="goods_name">
							{{item.name}}
						</view>
						<view>
							<text class="del" @click="del(item,index)">删除</text>
						</view>
					</view>
					<view class="goods_price">
						<view>
							<text class="price">￥{{item.price * item.num}}</text>
							<text class="add" @click="add(item)">+</text>
							<input class="uni_input" @input="onKeyInput" :value="item.num" />
							<text class="reduce" @click="reduce(item)">-</text>
						</view>

					</view>
				</view>
			</view>
			<view>
				<text>还没选够</text>
			</view>
		</view>
		
		<view class="selected_all">
			<view class="choose">
				<checkbox-group @change="selectedall()">
					<checkbox :checked="allchecked" color="orange" style="transform:scale(0.7);" />全选
				</checkbox-group>
			</view>
			<view class="totalPrice">
				<view class="total">
					<text>合计：</text>
					<text>{{totalPrice}}</text>
				</view>
				<button @tap="submit" :disabled="disabled" class="allNumber">
					结算:（ {{totalNum}} )
				</button>

			</view>
		</view>

	</view>
</template>

<script>
	// import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
				flag: 0, // 用于判断用户购物车是否有商品，没有商品为true，有商品为false
				cartlist: [
					{
						id: 1,
						img_url: "../../static/imgs/cat.jpg",
						price: "19",
						name: "伸腿瞪眼丸",
						num: 2
					},
					{
						id: 2,
						img_url: "../../static/imgs/dog.jpg",
						price: "109",
						name: "鹤顶红",
						num: 3
					},
					{
						id: 3,
						img_url: "../../static/imgs/1.jpg",
						price: "19.9",
						name: "伸腿瞪眼丸",
						num: 13
					},
				], // 购物车商品信息
				allchecked: false, //默认全选为true，因为后台数据没有是否选中的信息
				inputValue: '',
			}
		},
		computed: {
			// 计算选中商品数量
			totalNum() {
				let totalNum = 0;
				this.cartlist.map(item => {
					item.flag ? totalNum += item.num : totalNum += 0
				})
				return totalNum
			},
			//计算选中商品的总价
			totalPrice() {
				let totalPrice = 0;
				this.cartlist.map(item => {
					item.flag ? totalPrice += item.num * item.price : totalPrice += 0
				})
				return totalPrice
			}
		},
		onShow() {
			try {
				let userid = uni.getStorageSync('userid') // 提取缓存中的用户id
				let token = uni.getStorageSync('token') // 提取缓存中的token值
				if (userid && token) { // 两个值都在的时候才能访问购物车数据，否则跳到登录界面
					uni.request({
						url: '/cart',
						method: "POST",
						data: {
							userid,
							token
						}
					}).then(res => {
						// console.log(res.data.data)
						if (res.data.code === '10019') {
							toast({
								title: '请先登录'
							})
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else if (res.data.code === '10012') {
							toast({
								title: '请选择商品'
							})
							this.flag = true
						} else {
							toast({
								title: '获取列表成功'
							})
							this.flag = false
							res.data.data.map(item => { //因为后端数据没有是否选中，所以自己加了一条
								item.flag = true
							})
							this.cartlist = res.data.data
						}
					})
				} else {
					toast({
						title: '未获取到登录信息。请先登录'
					})
					uni.navigateTo({
						url: '/pages/index/index'
					})
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		methods: {
			onKeyInput: function(event) {
				this.inputValue = event.target.value
			},
			
			// 减号操作
			reduce(item) {
				let num = item.num
				// 需要判断是否会减到0，我在这里是最小为1.
				if (num > 1) {
					num -= 1
				} else {
					num = 1
					return
				}
				let token = uni.getStorageSync('token')
				request({
					url: '/cart/update',
					data: {
						token,
						cartid: item.cartid,
						num
					}
				}).then(res => {
					if (res.data.code === '10019') {
						toast({
							title: '请先登录'
						})
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else {
						toast({
							title: '修改数量成功'
						})
						item.num = num
					}
				})
			},
			// 加号操作
			add(item) {
				let num = item.num
				num += 1
				let token = uni.getStorageSync('token')
				request({
					url: '/cart/update',
					data: {
						token,
						cartid: item.cartid,
						num
					}
				}).then(res => {
					if (res.data.code === '10019') {
						toast({
							title: '请先登录'
						})
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else {
						toast({
							title: '修改数量成功'
						})
						item.num += 1
					}
				})
			},
			// 删除单挑购物车商品
			del(item, index) {
				let token = uni.getStorageSync('token')
				request({
					url: '/cart/delete',
					data: {
						token,
						cartid: item.cartid,
					}
				}).then(res => {
					if (res.data.code === '10019') {
						toast({
							title: '请先登录'
						})
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else {
						toast({
							title: '删除成功'
						})
						this.cartlist.splice(index, 1)
						if (this.cartlist.length === 0) {
							this.flag = true
						}
					}
				})
			},
			// 单个商品前的勾选
			selected(item) {
				// console.log(item)
				item.flag = !item.flag
				if (!item.flag) {
					this.allchecked = false
				} else {
					const test = this.cartlist.every(item => {
						return item.flag === true
					})
					if (test) {
						this.allchecked = true
					} else {
						this.allchecked = false
					}
				}
			},
			// 全选按钮
			selectedall() {
				this.allchecked = !this.allchecked
				if (this.allchecked) {
					this.cartlist.map(item => {
						item.flag = true
					})
				} else {
					this.cartlist.map(item => {
						item.flag = false
					})
				}
			}

		}
	}
</script>

<style lang="scss">
	.cartlist {
		background-color: #eee;
		padding: 5rpx 0;

		.cartitem {
			background-color: #fff;
			height: 180rpx;
			margin-bottom: 8rpx;

			.selected {
				// width: 10rpx;
				// height: 10rpx;
				float: left;
				line-height: 180rpx;
				padding-left: 5px;
			}


			image {
				display: inline-block;
				height: 160rpx;
				width: 160rpx;
				padding: 5px 0;
				float: left;
			}

			.itemright {
				// display: inline-block;
				padding: 6px;
				height: 160rpx;

				.line_one {
					padding: 10rpx;
					display: flex;
					justify-content: space-between;

					.goods_name {
						padding: 10rpx;
						font-size: 28rpx;
					}

					.del {
						// float: right;
						// margin-bottom: 10px;
						background-color: red;
						color: #FFFFFF;
						border-radius: 3px;
						padding: 4rpx 3rpx;
						text-align: center;
						font-size: 26rpx;
					}
				}

				.goods_price {
					padding: 15rpx;
					bottom: 15rpx;
					// display: flex;
					margin-left: 210rpx;

					.price {
						font-size: 28rpx;
						color: #FF6A6A;
						margin-right: 30rpx;
						height: 28rpx;
						line-height: 40rpx;
					}

					.uni_input {
						border: 1rpx solid #C0C0C0;
						width: 80rpx;
						// min-height: 30rpx;
						text-align: center;
						float: right;
						line-height: 30rpx;
					}

					.reduce {
						color: #999999;
						margin-right: 12rpx;
						margin-left: 220rpx;
						font-weight: 500;
						float: right;
						line-height: 40rpx;
					}

					.add {
						color: #999999;
						margin-left: 12rpx;
						font-weight: 500;
						float: right;
						line-height: 40rpx;
					}


				}
			}
		}

	}

	.selected_all {
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
		background-color: #F1F1F1;
		position: fixed;
		z-index: 1;
		height: 90rpx;
		line-height: 90rpx;
		bottom: 50px;
		justify-content: space-between;
		font-size: 30rpx;

		.totalPrice {
			display: flex;
			// flex-wrap: nowrap;
			font-size: 28rpx;
			margin-top: 10rpx;
			margin-right: 20rpx;

			.total {
				margin-right: 20rpx;

				text {
					// font-size: 28rpx;
				}
			}

			.allNumber {
				font-size: 28rpx;
				// text-align: center;
				line-height: 90rpx;
				background: #FF6A6A;
				color: #fff;
			}
		}

		.choose {
			margin-top: 10rpx;
			margin-left: 20rpx;
			line-height: 90rpx;
			text-align: center;
			height: 90rpx;
			width: 200rpx;

		}
	}
</style>

 
<!-- <template>
     <view class="page cart">
         <view class="c-header">
             <div class="h-left"></div>
             <view class="h-mid">
                 <text>购物车</text>
             </view>
             <view class="h-right">
                 <text>编辑</text>
             </view>
         </view>
         <view class="c-main">
             <view class="m-group">
                 <view class="g-header">
                     <view class="h-left">
                         <text class="iconfont">&#xe639;</text>
                         <text class="l-text">严选自营</text>
                     </view>
                     <view class="h-right">
                         <text class="iconfont">&#xe619;</text>
                         <text>满150.00免运费</text>
                     </view>
                 </view>
                 <view class="g-content">
                     <view class="c-item border-1px-top"
                           :key="key"
                           v-for="(item, key) in 2">
                         <view class="i-select">
                             <text class="iconfont">&#xe651;</text>
                         </view>
                         <view class="i-pic">
                             <image src="http://yanxuan.nosdn.127.net/e216153c4c420a6bfaa754e6220981cd.png?imageView&quality=65&thumbnail=330x330"></image>
                         </view>
                         <view class="i-info">
                             <view class="info-name">
                                 <text>2018雨前碧螺春 3克*30袋</text>
                             </view>
                             <view class="i-price-num">
                                 <view class="price">
                                     <text>￥215.00</text>
                                 </view>
                                 <view class="num">
                                     <x-counter></x-counter>
                                 </view>
                             </view>
                         </view>
                     </view>
                 </view>
             </view>
         </view>
         <div class="c-footer">
             <div class="f-info">
                 <div class="i-left">
                     <text class="iconfont">&#xe651;</text>
                     <text>全选</text>
                 </div>
                 <div class="i-right">
                     <text class="r-text">合计</text>
                     <text class="r-price">￥452.00</text>
                 </div>
             </div>
             <div class="f-action" @tap="nav('/pages/checkout/index')">
                 <text>去结算(2)</text>
             </div>
         </div>
     </view>
 </template>
 
 <script>
     import counter from '../../components/counter.vue'
     export default {
         components: {
             "x-counter":counter
         }
     }
 </script>
 
 <style lang="less">
    .cart{
    	.c-header{
    		position: fixed;
    		top:0;
    		left:0;
    		display: flex;
    		align-items: center;
    		justify-content: space-between;
    		height: 88rpx;
    		box-sizing: border-box;
    		width:100%;
    		padding: 0 30rpx;
    		background: white;
    		.h-mid{
    			text{
    				font-size: 30rpx;
    				color: #333;
    			}
    		}
    		.h-right{
    			text{
    				font-size: 32rpx;
    				color:#b60a0a;
    			}
    		}
    	}
    	.c-main {
    		padding-top: 88rpx;
    		.m-group {
    			background: white;
    			.g-header {
    				display: flex;
    				justify-content: space-between;
    				align-items: center;
    				height: 88rpx;
    				padding: 0 28rpx;
    				.h-left {
    					display: flex;
    					align-items: center;
    					.iconfont {
    						font-size: 40rpx;
    						color: #eee;
    					}
    					.l-text{
    						padding-left: 10rpx;
    						font-weight: 600;
    						color: #333;
    					}
    				}
    				.h-right {
    					display: flex;
    					align-items: center;
    					color: #666;
    					.iconfont{
    						font-size: 40rpx;
    					}
    					text {
    						padding-left: 10rpx;
    					}
    				}
    			}
    			.g-content {
    				padding: 0 28rpx;
    				.c-item {
    					display: flex;
    					height: 223rpx;
    					box-sizing: border-box;
    					padding: 28rpx 0;
    					.i-select {
    						display: flex;
    						align-items: center;
    						flex-basis: 64rpx;
    						text{
    							font-size: 40rpx;
    							color: #eee;
    						}
    					}
    					.i-pic {
    						flex-basis: 164rpx;
    						image {
    							height: 100%;
    							width: 100%;
    						}
    					}
    					.i-info {
    						display: flex;
    						flex-direction: column;
    						justify-content: space-between;
    						flex: 1;
    						padding: 0 10rpx;
    						.info-name {
    							text {
    								font-weight: 600;
    								color: #333;
    							}
    						}
    						.i-price-num {
    							display: flex;
    							justify-content: space-between;
    							.price {
    								display: flex;
    								flex-direction: column;
    								justify-content: flex-end;
    								text {
    									color: #eee;
    								}
    							}
    						}
    					}
    				}
    			}
    			&:not(:first-child) {
    				margin-top: 28rpx;
    			}
    		}
    	}
    	.c-footer{
    		position: fixed;
    		bottom:0;
    		left:0;
    		display: flex;
    		width:100%;
    		height: 110rpx;
    		background: white;
    		.f-info{
    			position: relative;
    			flex:1;
    			.i-left{
    				position: absolute;
    				top:50%;
    				left:30rpx;
    				transform: translateY(-50%);
    				display: flex;
    				align-items: center;
    				.iconfont{
    					font-size: 40rpx;
    					color:#eee;
    				}
    			}
    			.i-right{
    				position: absolute;
    				top:50%;
    				right:30rpx;
    				transform: translateY(-50%);
    				display: flex;
    				align-items: center;
    				.right-price{
    					color:#b60a0a;
    				}
    			}
    		}
    		.f-action{
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			flex-basis: 210rpx;
    			background: #eee;
    			text{
    				color:white;
    			}
    		}
    	}
    }
 </style> -->